import React from 'react'
import { useSelector,useDispatch } from 'react-redux'
import type {RootState} from '@/store'
import { useAppDispatch } from '@/store'
import {updateName,updateAge,updateEmail} from '@/store/modules/user'
import {Button,Rate} from 'antd'
import {fetchUserById} from '@/store/modules/user'



export default function ReduxTs() {
    const {name,age,email} = useSelector((state: RootState) => state.user)
    const dispatch = useDispatch()
    const asyncDispatch = useAppDispatch() // 同步异步都可以使用

    //1. 这种方式卟能对payload进行类型限制
    const handleClickName = ()=>{
        asyncDispatch({type:'user/updateName',payload:8888})
    }
    // 2. 使用第二种方式进行payload 数据类型的限制
    const handleClickAge = ()=>{
        dispatch(updateAge(18))
    }

    const handleClickEmail = ()=>{
        asyncDispatch({type:'user/fetchByIdStatus',payload:'newEmail'})
    }
    //异步方法的使用
    const handleClickAsync = ()=>{
        asyncDispatch(fetchUserById(123))
    }
  return (
    <div>
      redux  的类型限制 和 使用
      <hr></hr>
      <p>user name: {name} <button onClick={handleClickName}>edit</button></p>
      <p>user age: {age} <button onClick={handleClickAge}>edit</button></p>
      <p>user email: {email} <button onClick={handleClickEmail}>edit</button></p>
      <div>antd 组件库的使用 <Button type="primary" onClick={handleClickAsync}>antd按钮</Button> <Rate value={3}></Rate></div>
    </div>
  )
}
